<template>
  <view
    :id="`tn-tabbar-${itemID}`"
    class="tn-tabbar"
    :class="tabbarClass"
    :style="tabbarStyle"
  >
    <!-- 背景颜色 -->
    <view
      class="bg"
      :class="bgClass"
      :style="bgStyle"
    ></view>

    <!-- tabbar item信息 -->
    <view class="wrapper" :style="itemWrapperStyle">
      <!-- 普通item -->
      <view
        v-for="(item, index) in data"
        :key="index"
        :id="`tti-${itemID}_${index}`"
        class="item"
        :class="itemClass(index)"
        :style="itemStyle(index)"
        @tap.stop="handleItemClickEvent(index)"
      >
        <!-- 图片图标 -->
        <view
          class="icon"
          :style="itemIconStyle(index, isImageIcon(index) ? 'image' : 'icon')"
        >
          <image
            v-if="!item?.bulge && isImageIcon(index)"
            class="image"
            :src="itemIcon(index)"
            mode="scaleToFill"
          />
          <!-- 图标 -->
          <tn-icon v-else-if="!item?.bulge" :icon="itemIcon(index)"></tn-icon>
        </view>
        <!-- 标题 -->
        <view class="title">{{ item.title }}</view>
      </view>

      <!-- 凸起按钮 -->
      <view
        v-for="(item, index) in bulgeButtonInfo"
        :key="index"
        class="bulge-item"
        :class="bulgeClass(item.itemIndex)"
        :style="bulgeStyle(index)"
        @tap.stop="handleItemClickEvent(item.itemIndex)"
      >
        <!-- icon -->
        <view
          class="icon"
          :class="bulgeIconClass(item.itemIndex)"
          :style="bulgeIconStyle(item.itemIndex)"
          @tap.stop="handleItemClickEvent(item.itemIndex)"
        >
          <image
            v-if="isImageIcon(item.itemIndex)"
            class="image"
            :src="itemIcon(item.itemIndex)"
            mode="scaleToFill"
          />
          <!-- 图标 -->
          <tn-icon v-else :icon="itemIcon(item.itemIndex)"></tn-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  ComponentInternalInstance,
  getCurrentInstance,
  watch,
  onMounted
} from 'vue'
import {
  tabbarProps,
  tabbarEmits
} from '../../../types/tn-tabbar'

import TnIcon from '../../tn-icon/src/Icon.vue'

import useTabbarStyle from '../lib/useTabbarStyle'

const instance = getCurrentInstance() as ComponentInternalInstance

const props = defineProps(tabbarProps)
const emits = defineEmits(tabbarEmits)

const {
  itemID,
  data,
  itemIcon,
  isImageIcon,
  tabbarStyle,
  tabbarClass,
  bgStyle,
  bgClass,
  itemWrapperStyle,
  itemStyle,
  itemClass,
  itemIconStyle,
  bulgeButtonInfo,
  bulgeStyle,
  bulgeClass,
  bulgeIconStyle,
  bulgeIconClass,
  updatePropsData,
  getTabbarItemRectInfo
} = useTabbarStyle(instance)

watch(() => props, (val) => {
  updatePropsData(val)
}, {
  immediate: true,
  deep: true
})


// 切换导航item
const switchItem = (index: number) => {
  emits('update:modelValue', index)
  emits('change', index)
}

// 处理点击事件
const handleItemClickEvent = async (index: number) => {
  if (props.beforeSwitch && typeof(props.beforeSwitch) === 'function') {
    let beforeSwitch = props.beforeSwitch()
    
    if (beforeSwitch.then && typeof(beforeSwitch.then) === 'function') {
      // 判断是否返回Promise
      await beforeSwitch.then(() => {
        switchItem(index)
      }).catch(() => {})
    } else if (beforeSwitch === true) {
      // 判断是否为普通函数
      switchItem(index)
    }
  } else {
    switchItem(index)
  }
}

onMounted(() => {
  getTabbarItemRectInfo()
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

  @import '../../../theme.scss';

  .tn-tabbar {
    position: relative;
    width: 100%;
    height: 100rpx;
    box-sizing: content-box;

    &.shadow {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }

    &.fixed {
      position: fixed;
      bottom: 0;
    }

    /* 背景 start */
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #FFFFFF;
      z-index: inherit;
      &.frosted-glass {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(20rpx);
        -webkit-backdrop-filter: blur(20rpx);
      }
    }
    /* 背景 end */

    /* item start */
    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-around;
      padding-bottom: 8rpx;
      box-sizing: border-box;

      .item {
        flex-shrink: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        font-size: 24rpx;
        color: #AAAAAA;
        cursor: pointer;

        .icon {
          width: 40rpx;
          height: 40rpx;
          font-size: 40rpx;
          line-height: 1;
          .image {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          margin-top: 8rpx;
        }

        &.active {
          color: $tn-main-color;
          &.animation {
            .icon {
              transform-origin: center center;
              animation: selectAnimationScale 0.35s ease-out;
            }
          }
        }
      }
    }
    /* item end */

    /* 凸起按钮 start */
    .bulge-item {
      position: absolute;
      top: -50%;
      border-radius: 50%;
      background-color: #FFFFFF;

      .icon {
        position: absolute;
        background-color: $tn-main-color;
        width: 70%;
        height: 70%;
        font-size: 40rpx;
        line-height: 1;
        color: #FFFFFF;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .image {
          width: 80%;
          height: 80%;
          border-radius: inherit;
        }
      }
      &.shadow {
        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
      }

      &.active {
          &.animation {
            transform-origin: center center;
            animation: selectBulgeAnimationScale 0.35s ease-out;
          }
        }
    }
    /* 凸起按钮 end */
  }

  /* 点击动画-缩放 */
  @keyframes selectAnimationScale {
    0% {
      transform: scale(0.6);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes selectBulgeAnimationScale {
    0% {
      transform: translateY(0px) rotateX(0);
    }
    50% {
      transform: translateY(10px) rotateX(90deg);
    }
    100% {
      transform: translateY(0px) rotateX(0);
    }
  }
</style>
